<script lang="ts" setup>
import {cn} from '@/lib/utils'
import {formatDistanceToNow} from 'date-fns'
import {ScrollArea} from "@/components/ui/scroll-area";
import {Button} from "@/components/ui/button";
import {Badge} from "@/components/ui/badge";
import {Key} from "@/pages/keys/data/keys";

interface KeyListProps {
  items: Key[]
}

defineProps<KeyListProps>()
const selectedKey = defineModel<string>('selectedKey', {required: false})

function getBadgeVariantFromLabel(label: string) {
  // if (['work'].includes(label.toLowerCase()))
  //   return 'default'
  //
  // if (['personal'].includes(label.toLowerCase()))
  //   return 'outline'
  //
  // return 'secondary'
  return 'outline'
}
</script>

<template>
  <ScrollArea class="h-[calc(100dvh-72px-56px-3rem-53px)] flex">
    <div class="flex flex-1 flex-col gap-2 p-4 pt-0">
      <TransitionGroup name="list" appear>
        <!--试用原生button组件-->
        <button
            v-for="item of items"
            :key="item.id"
            :class="cn(
            'flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent',
            selectedKey === item.id && 'bg-muted',
          )"
            @click="selectedKey = item.id"
        >
          <div class="w-full flex flex-col gap-1">
            <div class="flex items-center">
              <div class="flex items-center gap-2">
                <div class="font-semibold">
                  {{ item.description }}
                </div>
                <span v-if="!item.enabled" class="h-2 w-2 flex rounded-full bg-red-600"/>
              </div>
              <div
                  :class="cn(
                  'ml-auto text-xs',
                  selectedKey === item.id
                    ? 'text-foreground'
                    : 'text-muted-foreground',
                )"
              >
                {{ formatDistanceToNow(new Date(item.createdAt), {addSuffix: true}) }}
              </div>
            </div>

            <div class="text-xs font-medium">
              {{ item.summary }}
            </div>
          </div>
          <div class="line-clamp-2 text-xs text-muted-foreground">
            {{ item.accessKey }}
          </div>
          <div class="flex items-center gap-2">
            <Badge v-for="label of item.labels" :key="label" :variant="getBadgeVariantFromLabel(label)">
              {{ label }}
            </Badge>
          </div>
        </button>
      </TransitionGroup>
    </div>
  </ScrollArea>
</template>

<style scoped>
.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(15px);
}

.list-leave-active {
  position: absolute;
}
</style>
